<!--
 * @Author: DUST
 * @Date: 2023-05-29 09:48:15
 * @LastEditors: DUST
 * @LastEditTime: 2023-11-27 12:00:38
 * @FilePath: \business-card-system\admin\src\views\login.vue
 * @Description: 
 * undefined
-->
<template>
  <div class="login">
    <!-- 背景 -->
    <!-- <bgCanvas class="loginBg" /> -->
    <div class="loginMask">
      <!-- 登录窗口 -->
      <div id="loginBox">
        <div class="loginFormBox">
          <div class="loginBoxLeft"></div>
          <div class="loginBoxRight">
            <div class="welcome">欢迎登陆</div>
            <a-form class="loginForm">
              <a-form-item v-bind="validateInfos.username">
                <a-input
                  placeholder="请输入用户名"
                  class="loginInput"
                  v-model:value="formObj.username"
                  @keyup.enter="doLogin"
                >
                  <template #prefix>
                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="validateInfos.password">
                <a-input-password
                  placeholder="请输入密码"
                  class="loginInput"
                  v-model:value="formObj.password"
                  @keyup.enter="doLogin"
                >
                  <template #prefix>
                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input-password>
              </a-form-item>
            </a-form>
            <a-button type="primary" class="loginBtn" @click="doLogin">
              登录
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import bgCanvas from "@/components/bgCanvas.vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { getToken, getInfo } from "@/api";
import { message, Form } from "ant-design-vue";
import { reactive } from "vue";
import { AxiosResponse } from "axios";
import { Ajax, TokenData, UserInfo } from "../interface";
import userStore from "@/store/user";
import router from "@/router";

const useForm = Form.useForm;

const formObj = reactive({
  username: "",
  password: "",
});
// inputRule
const rulesRef = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
});
//
const { resetFields, validate, validateInfos } = useForm(formObj, rulesRef);

const doLogin = () => {
  validate()
    .then(() => {
      // console.log("通过", formObj);
      return getToken({
        ...formObj,
      });
    })
    .then((res: AxiosResponse<Ajax<TokenData>>) => {
      console.log(res);
      userStore.setTokenInfo(res.data.data);
      return getInfo(res.data.data.id);
    })
    .then((res: AxiosResponse<Ajax<UserInfo>>) => {
      userStore.setUserInfo(res.data.data);

      router.push("/admin");
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("@/assets/bg.jpg") no-repeat;
  background-size: cover;
  background-color: #000;
  .loginMask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
  }
  .loginBg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
  }
  #loginBox {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .loginFormBox {
      width: 1000px;
      height: 500px;
      // background-color: rgba(255, 255, 255, 0.8);
      // backdrop-filter: blur(20px);
      border-radius: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
      // box-shadow: 0 0 6px 2px #eee;
      background: url("@/assets/bg.jpg") no-repeat;
      background-size: 100vw 100vh;
      background-position: -410px 0px;
      .loginBoxLeft,
      .loginBoxRight {
        width: 50%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        // box-shadow: 0 1px 4px 0 rgba(255,255,255,.16);
        // backdrop-filter: blur(20px);
      }
      .loginBoxRight {
        background-color: #fff;
        padding: 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        // align-items: center;
        justify-content: center;
        .welcome {
          line-height: 150px;
          font-size: 36px;
          font-family: "楷体";
          font-weight: bold;
        }
        .loginForm {
          width: 100%;
          .loginInput {
            height: 40px;
            border: none;
            border: 1px solid #ccc;
          }
        }
        .loginBtn {
          width: 100%;
          height: 40px;
          font-size: 18px;
          margin-top: 40px;
          // line-height: 40px;
        }
      }
    }
  }
}
</style>
